<template>
  <div>
    <div class="ctn" :style="{ 'left':`${posx}px` }">
      <div v-for="item in nums" ref="myDiv" class="image-crop" :style="{ 'background-image': `url(${imgSrc})`,'width':`${singleWidth}px`,'height':`${sourceHeight}px`,'background-position':`${item.pos}px 0px`, 'left':`${item.left}px` }" @mouseover="onMouseOver" @mousedown="onMouseDown" @mouseup="onMouseOver" @mouseleave="onMouseLeave" alt="Button">
      </div>
    </div>
  </div>
</template>
   
  <script lang="ts" setup>
  // const props = defineProps([
  //   'imgSrc',
  //   'regMap',
  //   'sourceWidth',
  //   'value',
  //   'gap',
  //   'align'
  // ])
  const props = defineProps({
    imgSrc: {
        type: String,
        default: ''
    },
    regMap: {
        type: String,
        default: ''
    },
    align: {
        type: String,
        default: 'center'
    },
    sourceWidth: {
        type: Number,
        default: 0
    },
    sourceHeight: {
        type: Number,
        default: 0
    },
    value: {
        type: String,
        default: '0'
    },
    gap: {
        type: Number,
        default: 0
    }
  });

  import { ref, watch } from 'vue';
   
  const nums = ref([{pos:0,left:0}]);
  let cw:number = props.sourceWidth / props.regMap.length;
  var gap:number = props.gap ? props.gap : 0;
  const singleWidth = ref(cw);
  const numWidth = ref(0);
  const posx = ref(0);
  const numMap:any = {};
  const len = props.regMap.length;
  for(var i=0; i<len; i++){
    numMap[props.regMap.charAt(i)] = i;
  }

  createNums(props.value);
  // 监听 title 属性的变化
  watch(() => props.value, (newvalue, oldvalue) => {
    createNums(newvalue);
  });
  //const imageSrc = ref(imgSrc); // 图片路径
  function createNums(value:string){
    let str:string = value;
    let arr:any[] = nums.value;
    arr.length = 0;
    let char:string;
    let pos:number;
    let left:number = 0;
    for(var i=0; i<str.length; i++){
      char = str.charAt(i);
      // if(char == "/"){
      //   pos = 10 * cw * -1;
      // }
      // else{
      //   pos = parseInt(char) * cw * -1;
      // }
      pos = numMap[char] * cw * -1;
      arr.push({'pos':pos, 'left':left});
      left += (cw + props.gap);
    }
    
    numWidth.value = (cw+gap) * str.length;
    posx.value = -0.5*numWidth.value;
  }
  

  // defineExpose({numWidth});

  const hoverState = ref(false); // 鼠标是否悬停在按钮上
  const buttonState = ref(0); // 按钮的当前状态（0, 1, 2）
  
  const myDiv = ref(null);
  const position = ref("");
   
  function toggleState() {
    //buttonState.value = (buttonState.value + 1) % 3; // 循环切换状态
    // myDiv.value.classList.toggle('image-crop2');
  }
  function onMouseOver(){
    position.value = "left center";
  }
  function onMouseDown(){
    position.value = "left bottom";
  }
  function onMouseLeave(){
    position.value = "left top";
  }
   
  // 根据buttonState的值，可以使用CSS切换图片的部分显示
  // 例如，可以在CSS中定义不同状态的背景位置
  </script>
   
  <style scoped>

  .ctn{
    display: flex;
    flex-direction: row;
    position:absolute;
  }
  /* CSS样式 */
  .image-crop {
    position:absolute;
    /* width: 76px; 设置你想要显示的宽度 */
    /* height: 84px; 设置你想要显示的高度 */
    background-position: -0px 0px; /* 设置背景图片的起始位置 */
  }
  </style>